import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TouchableOpacity,
    Text,
    TextInput, Image,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import NavigationBar from '../../common/NavigationBar';
import NavigationUtil from '../../navigators/NavigationUtil';
import {BASE_URL} from '../../common/BASE_URL';
import HttpUtils from '../../expand/dao/HttpUtils';
import StorageUtil from '../../utils/StorageUtil';
import {Constant} from '../../common/Constant';
import GlobalStyles from '../../common/styles/GlobalStyles';
import ToastUtil from '../../utils/ToastUtil';
import {Modal} from '@ant-design/react-native';
import styles from './styles'
import AntDesign from "react-native-vector-icons/AntDesign";


export default class Person extends Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner: false,
            form: {
                oldPwd: '',
                newPwd1: '',
                newPwd2: '',
            },
        };
    }
    componentDidMount() {
    }
    componentWillUnmount() {
    }

    render() {
        const {navigation} = this.props;
        return (
            <View
                style={[
                    GlobalStyles.pageContainer,
                    {flex: 1, backgroundColor: '#f5f5f5'},
                ]}>
                {/* 自定义顶部导航条 */}
                <NavigationBar navigation={navigation} headerBackTitle={'我的资料'} />
                {this.renderList()}
            </View>
        );
    }

    renderList() {
        return (
            <KeyboardAwareScrollView keyboardShouldPersistTaps={'always'}>
                <View>
                    <View style={[GlobalStyles.blockPanel, styles.menuPanel,{marginTop: 20,borderRadius: 10}]}>
                        <TouchableOpacity style={[styles.optionListItem,{height:65}]}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>头像</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row',alignItems: 'center'}}>
                                <Image source={require('../../assets/images/demo.png')} style={{width: 50,height: 50}}/>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                    </View>

                    <View style={[GlobalStyles.blockPanel, styles.menuPanel,{marginTop: 20,borderRadius: 10}]}>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>账号ID</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>0245</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>昵称</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>安妮</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>执法证号</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>执12753</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>单位</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>稽查大队一支队</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>电话号码</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>15433332123</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.optionListItem}>
                            <View style={styles.optionListItemLeft}>
                                <Text style={styles.optionListItemLeftLabel}>性别</Text>
                            </View>
                            <View style={{display: 'flex',flexDirection: 'row'}}>
                                <Text style={{color: '#333'}}>女</Text>
                                <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </KeyboardAwareScrollView>
        );
    }
}
